<template>
  <!-- 我的订单 -->
  <div class="order-my">
    <!-- 顶部 -->
    <div class="nav-top">
      <router-link to="/index/list">
        <van-icon class="icon" name="wap-home-o" />
      </router-link>
      <span>我的订单</span>
    </div>
    <!-- 滚动条 -->
    <div class="scroll-bar">
      <ul class="scroll">
        <li>
          <span v-bind:class="{sort:posi=='all'}" @click="change('all')">全部</span>
        </li>
        <li>
          <span :class="{sort:posi=='share'}" @click="change('share')">待分享</span>
        </li>
        <li>
          <span :class="{sort:posi=='payment'}" @click="change('payment')">待付款</span>
        </li>
        <li>
          <span :class="{sort:posi=='ship'}" @click="change('ship')">待发货</span>
        </li>
        <li>
          <span :class="{sort:posi=='receipt'}" @click="change('receipt')">待收货</span>
        </li>
        <li>
          <span :class="{sort:posi=='assess'}" @click="change('assess')">待评价</span>
        </li>
      </ul>
    </div>
    <!-- 商品 -->
    <div class="order">
      <div class="commodity">
        <ul>
          <li>
            <img src alt />
          </li>
        </ul>
        <van-icon class="icon" name="arrow" />
      </div>
      <div class="amount">
        <div class="mr-16" style="margin-right: 16px; font-size: 14px">
          共
          <span style="margin-right: 2px;">x</span> 件商品
        </div>
        <div class="mr-16" style="margin-right: 16px;">
          <span style="font-size: 14px; margin-right: 2px;">实付</span>
          <span style="font-size: 10px; color:#be3335; margin-right: 2px;">¥</span>
          <span style="font-size: 16px; color:#be3335 ">xxx.</span>
          <span style="font-size: 10px; color:#be3335">x</span>
        </div>
      </div>
      <div class="bought">
        <span>已取消</span>
        <div>重新购买</div>
      </div>
    </div>
    <!-- 无产品时固定定位显示 -->
    <div class="no-goods">
      <dir class="goods">
        <van-icon name="cart-o" />
        <div>去挑些你喜欢的东西吧</div>
      </dir>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      posi: "all"
    };
  },
  methods: {
    change(aa) {
      // alert('aaaa')
      //  console.log(aa)
      this.posi = aa;
    }
  }
};
</script>
<style lang="less" scoped>
.sort {
  color: #be3335;
  position: relative;
}
.sort::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #be3335;
  left: 0;
  bottom: -12px;
}
body {
  background-color: #f4f4f4;
}
.order-my {
  //   height: 100vh;
  background-color: #f4f4f4;
  .nav-top {
    position: relative;
    .icon {
      position: absolute;
      left: 14px;
      font-size: 16px;
      top: 14px;
      color: #000;
    }
    width: 100%;
    text-align: center;
    line-height: 45px;
    border-bottom: 1px solid #f3f3f3;
    font-size: 16px;
    font-weight: 500;
    background-color: #fff;
  }
  .scroll-bar {
    width: 100%;
    height: 48px;
    border-bottom: 1px solid #f3f3f3;
    background-color: #fff;
    padding-left: 25px;
    box-sizing: border-box;
    .scroll::-webkit-scrollbar {
      display: none;
    }
    .scroll {
      // width: 120%;
      display: flex;

      //   margin-left: 25px;
      height: 48px;
      // flex-wrap: nowrap;
      // scroll-behavior:
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      // overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;

      li {
        // flex: 1;
        line-height: 48px;
        color: #797d82;
        font-size: 15px;
        span {
          margin-right: 36px;
        }
      }
    }
  }
  .order {
    padding-left: 14px;
    background-color: #fff;
    margin-bottom: 11px;
    .commodity {
      width: 100%;
      height: 100px;
      position: relative;
      border-bottom: 1px solid #f3f3f3;
      box-sizing: border-box;
      ul {
        display: flex;
        height: 100%;
        align-items: center;
        li {
          width: 70px;
          height: 70px;
          background-color: #f9f9f9;
        }
        img {
          width: 100%;
        }
      }
      .icon {
        position: absolute;
        right: 16px;
        top: 50%;
        margin-top: -8px;
      }
    }
    .amount {
      display: flex;
      height: 41px;
      align-items: center;
      justify-content: flex-end;
      border-bottom: 1px solid #f3f3f3;
      box-sizing: border-box;
    }
    .bought {
      height: 50px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
        color: #bdc0c5;
      }
      div {
        margin-right: 16px;
        width: 85px;
        line-height: 34px;
        text-align: center;
        border: 1px solid #2e2f30;
        border-radius: 4px;
        box-sizing: border-box;
        color: #515152;
      }
    }
  }
  .no-goods {
    position: fixed;
    width: 100vw;
    height: 100vh;
    text-align: center;
    top: 0;
    right: 0;
    background-color: #fff;
    z-index: -1;
    .goods {
      position: absolute;
      width: 130px;
      height: 110px;
      top: 50%;
      left: 50%;
      margin-left: -100px;
      margin-top: -55px;
    }
    i {
      // top: 50%;
      // left: 50%;
      // margin-left: -50px;
      // margin-top: -50px;
      font-size: 80px;
      color: #bec1c6;
    }
    div {
      font-size: 12px;
      color: #bec1c6;
      // position: absolute;
      
    }
  }
}
</style> 